<template>
  <div class="product-detail">
    <div v-if="product" class="product-content">
      <button @click="goBack" class="back-btn">← 返回产品列表</button>
      
      <div class="product-main">
        <div class="product-image-large">
          <img :src="product.image" :alt="product.name">
        </div>
        
        <div class="product-details">
          <h1>{{ product.name }}</h1>
          <div class="product-category">{{ product.category }}</div>
          <div class="product-price">¥{{ product.price }}</div>
          
          <div class="product-description">
            <h3>产品描述</h3>
            <p>{{ product.description }}</p>
            <p>{{ product.fullDescription }}</p>
          </div>
          
          <div class="product-features">
            <h3>产品特性</h3>
            <ul>
              <li v-for="feature in product.features" :key="feature">
                {{ feature }}
              </li>
            </ul>
          </div>
          
          <div class="product-actions">
            <button class="add-to-cart-btn" @click="addToCart">
              加入购物车
            </button>
            <button class="buy-now-btn" @click="buyNow">
              立即购买
            </button>
          </div>
        </div>
      </div>
      
      <div class="related-products">
        <h3>相关产品</h3>
        <div class="related-grid">
          <div 
            v-for="relatedProduct in relatedProducts" 
            :key="relatedProduct.id"
            class="related-card"
            @click="goToProduct(relatedProduct.id)"
          >
            <img :src="relatedProduct.image" :alt="relatedProduct.name">
            <h4>{{ relatedProduct.name }}</h4>
            <div class="related-price">¥{{ relatedProduct.price }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <div v-else class="product-not-found">
      <h2>产品未找到</h2>
      <p>抱歉，您查找的产品不存在。</p>
      <button @click="goToProducts" class="back-to-products-btn">
        返回产品列表
      </button>
    </div>
    
    <div v-if="showMessage" class="action-message">
      {{ message }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',
  props: ['id'],
  data() {
    return {
      showMessage: false,
      message: '',
      products: [
        {
          id: 1,
          name: 'Vue.js 开发指南',
          description: '全面学习Vue.js框架的完整教程',
          fullDescription: '这是一本深入浅出的Vue.js学习指南，涵盖了从基础概念到高级应用的所有内容。无论你是初学者还是有经验的开发者，都能从中获得有价值的知识和实践经验。',
          price: 89,
          category: '教程',
          image: 'https://via.placeholder.com/400x300/3498db/ffffff?text=Vue.js+Guide',
          features: [
            '从零开始学习Vue.js',
            '包含大量实战案例',
            '涵盖Vue Router和Vuex',
            '适合初学者和进阶者',
            '提供完整的项目源码'
          ]
        },
        {
          id: 2,
          name: 'JavaScript 高级编程',
          description: '深入理解JavaScript语言特性',
          fullDescription: 'JavaScript高级编程是一本专为有一定基础的开发者准备的进阶教程。深入探讨JavaScript的核心概念、设计模式、性能优化等高级主题。',
          price: 128,
          category: '编程',
          image: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=JavaScript+Pro',
          features: [
            '深入理解闭包和作用域',
            '掌握异步编程模式',
            '学习设计模式应用',
            '性能优化技巧',
            'ES6+新特性详解'
          ]
        },
        {
          id: 3,
          name: 'Web 前端开发工具',
          description: '提高开发效率的实用工具集',
          fullDescription: '精选的前端开发工具集合，包含代码编辑器插件、构建工具、调试工具等，帮助开发者提高工作效率，构建更好的Web应用。',
          price: 199,
          category: '工具',
          image: 'https://via.placeholder.com/400x300/2ecc71/ffffff?text=Dev+Tools',
          features: [
            '代码编辑器配置',
            '自动化构建工具',
            '调试和测试工具',
            '性能分析工具',
            '部署和监控工具'
          ]
        }
      ]
    }
  },
  computed: {
    product() {
      return this.products.find(p => p.id === parseInt(this.id))
    },
    relatedProducts() {
      if (!this.product) return []
      return this.products
        .filter(p => p.id !== this.product.id && p.category === this.product.category)
        .slice(0, 3)
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    goToProducts() {
      this.$router.push('/products')
    },
    goToProduct(id) {
      this.$router.push(`/products/${id}`)
    },
    addToCart() {
      this.showActionMessage('已加入购物车！')
    },
    buyNow() {
      this.showActionMessage('正在跳转到支付页面...')
    },
    showActionMessage(msg) {
      this.message = msg
      this.showMessage = true
      setTimeout(() => {
        this.showMessage = false
      }, 2000)
    }
  }
}
</script>

<style scoped>
.product-detail {
  max-width: 1200px;
  margin: 0 auto;
}

.back-btn {
  background: #ecf0f1;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 2rem;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background: #bdc3c7;
}

.product-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.product-image-large {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.product-image-large img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.product-details h1 {
  color: #2c3e50;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.product-category {
  background: #3498db;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 15px;
  display: inline-block;
  margin-bottom: 1rem;
}

.product-price {
  font-size: 2rem;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 2rem;
}

.product-description,
.product-features {
  margin-bottom: 2rem;
}

.product-description h3,
.product-features h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.product-features ul {
  list-style: none;
  padding: 0;
}

.product-features li {
  background: #ecf0f1;
  padding: 0.8rem;
  margin: 0.5rem 0;
  border-radius: 4px;
  border-left: 4px solid #3498db;
}

.product-actions {
  display: flex;
  gap: 1rem;
}

.add-to-cart-btn,
.buy-now-btn {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-to-cart-btn {
  background: #3498db;
  color: white;
}

.add-to-cart-btn:hover {
  background: #2980b9;
}

.buy-now-btn {
  background: #e74c3c;
  color: white;
}

.buy-now-btn:hover {
  background: #c0392b;
}

.related-products {
  margin-top: 3rem;
}

.related-products h3 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
  text-align: center;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.related-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s;
  text-align: center;
}

.related-card:hover {
  transform: translateY(-3px);
}

.related-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.related-card h4 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.related-price {
  color: #e74c3c;
  font-weight: bold;
}

.product-not-found {
  text-align: center;
  padding: 3rem;
}

.product-not-found h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.back-to-products-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 1rem;
}

.action-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #2ecc71;
  color: white;
  padding: 1rem 2rem;
  border-radius: 4px;
  z-index: 1000;
}

@media (max-width: 768px) {
  .product-main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .product-actions {
    flex-direction: column;
  }
}
</style>
